<template>
    <div class="find-password">
        <pub-top isBorder="true" title="绑定手机号"></pub-top>


        <!-- 头部提示 -->
        <div class="notice">短信验证，以确保是本人操作</div>


        <!-- 找回密码 -->
        <div class="find-btns flexv">

            <div class="find-btn flex">
                <span class="find-name">手机号</span>
                <input type="text" class="find-init flex1" v-model="tel" placeholder="请输入手机号">
                <span class="get-code" @click="getCode">获取验证码</span>
            </div>

            <div class="find-btn flex">
                <span class="find-name">验证码</span>
                <input type="text" class="code-init flex1" v-model="code" placeholder="请输入验证码">
            </div>

            <div class="next-btn" @click="subPwd">确定</div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast, List } from 'vant';
import pubTop from '@/components/top';

export default {
    data(){
        return {
            tel: null, // 手机号密码
            code: null, // 验证码
        }
    },
    created(){

    },
    watch: {
        tel(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.tel)){
                this.tel = null
            }
        },
        code(newVal, oldVal){
            if(!(/^[A-Za-z0-9]+$/).test(this.code)){
                this.code = null
            }
        },
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubTop
    },
    methods: {
        // 获取验证码
        getCode(){
            if(!this.tel){
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return;
            }
            if(!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)){
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return;
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=MsgCode&a=sendCode', {
                params: {
                    mobile: this.tel
                }
            }).then(res => {
                if(res.data.code == 200){
                    const data = res.data
                    Toast({
                        duration: 1800,
                        message: data.msg
                    })
                }else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },

        // 绑定
        subPwd(){
            const that = this;
            if(!this.tel){
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return
            }
            if(!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)){
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if(!this.code){
                Toast({
                    duration: 1800,
                    message: '请输入验证码'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Mine&a=setting', {
                params: {
                    uid: this.$store.state.user.uid,
                    type:  '4',
                    val: this.tel,
                    code: this.code
                }
            }).then(res => {
                if(res.data.code == 200){
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    // 存取localStorage的user
                    let userInfo = JSON.parse(sessionStorage.getItem('user'));
                    userInfo.mobile=this.tel;
                    sessionStorage.setItem('user', JSON.stringify(userInfo));
                    setTimeout(function(){
                        that.$router.go(-1)
                    }, 2000)
                }else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.find-password {
    min-height: 100vh;
    background-color: #f0f0f0;
    .notice {
        width: 100%;
        height: 0.76rem;
        padding: 0 0.28rem;
        font-size: 0.26rem;
        line-height: 0.86rem;
        color: #b2b2b2;
    }
    .find-btns {
        .find-btn {
            width: 100%;
            height: 0.9rem;
            padding: 0 0.28rem;
            font-size: 0.3rem;
            line-height: 0.9rem;
            color: #333;
            border-bottom: 1px solid #dbdbdb;
            background-color: #fff;
            .find-init {
                margin: 0 0.2rem 0 0.2rem;
            }
            .get-code {
                width: 1.5rem;
                height: 0.56rem;
                margin: auto 0;
                border-radius: 0.28rem;
                font-size: 0.24rem;
                line-height: 0.56rem;
                text-align: center;
                color: #fff;
                background-color: #1f78ff;
            }
            .code-init {
                margin-left: 0.2rem;
            }
        }
        .next-btn{
            width: 6.9rem;
            height: 0.88rem;
            margin: 1.58rem auto 0;
            border-radius: 0.1rem;
            font-size: 0.34rem;
            line-height: 0.88rem;
            text-align: center;
            color: #fff;
            background-color: #1f78ff;
        }
    }
}
</style>

